<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>canvaseTagTest</title>
		<style type="text/css">
			* {padding: 0;margin: 0;}
			#canvasEle {
				/* width: 1000px;
				height: 800px; */
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<!-- <canvas id="canvasEle"></canvas> -->
		<!-- 重点：
		当设置canvas的宽度和高度时，习惯性会不会使用内联样式。但对于canvas来说，fillRect()，只有在内联样式的时候才有效，外部的CSS往往会发生拉伸的情况。
		 -->
		<canvas id="canvasEle" width="1000px" height="800px"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvasEle");
		
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "#5BA8CD";
		ctx.fillRect(10,10,350,200);//
	</script>
</html>
